<template>
  <view class="signature flex flex-column align-center">
    <s-header-title ref="headerTitle" isDisplayBack :title="options.is_sign == 1 ? '签名':'个人简介'" is-fixed
                    background="#FFFFFF"
                    @getPageHeight="getPageHeight"></s-header-title>
    <view :style="{height:`${headerHeight}px`}"></view>
    <view class="signature_textare mt_25">
      <textarea class="signature_textare_class" v-model="signatureValue" :style="{
        minHeight : options.is_sign == 1 ? '202rpx' :'800rpx'
      }"
                :maxlength="options.is_sign == 1 ? '18' : '500'" autofocus="true"
                :placeholder="options.is_sign == 1 ? `${!!options.sigin && options.sigin != 'null' ? options.sigin:'请输入签名'}` : '请输入个人简介'"
                placeholder-class="signature_textarePlaceholder" auto-height></textarea>
    </view>
    <view class="signature_tips mt_10 flex align-center justify-between">
      <view class="signature_tips_left ml_14">
        <text class="signature_tips_left_text">最多输入{{ options.is_sign == 1 ? '18' : '500' }}字</text>
        <text class="signature_tips_right_text ml_14">{{
            signatureValue.length
          }}/{{ options.is_sign == 1 ? '18' : '500' }}
        </text>
      </view>
      <view class="signature_tips_button_class flex align-center justify-center mr_14" @click="setSignature">
        <text class="signature_tips_button_class_text">保存</text>
      </view>
    </view>
  </view>
</template>

<script>

  import HeaderTitle from '@/pages/familyPage/components/headerTitle.vue';
  import sheep from '@/sheep';

  export default {
    components: { HeaderTitle },
    data() {
      return {
        headerHeight: 0,
        signatureValue: '',
      };
    },
    props: {
      options: {
        type: Object,
        default() {
          return {};
        },
      },
    },
    watch: {
      options: {
        handler(newValue, oldValue) {
          if (newValue.flag == 1) {
            this.signatureValue = uni.getStorageSync('genealogy_sign') || '';
          } else {
            this.signatureValue = uni.getStorageSync('notePath') || '';
          }

        },
        immediate: true,
      },
    },
    methods: {
      getPageHeight(number) {
        this.headerHeight = number;
      },
      async setSignature() {
        if (!this.signatureValue) {
          uni.showToast({
            title: `请输入${this.options.is_sign == 1 ? '签名' : '备注'}`,
            icon: 'none',
          });
          return;
        }
        console.log(this.options.flag == 1);
        if (this.options.flag == 1) {
          let { code } = await sheep.$api.genealogy.updateMemberInfo({
            id: this.options.member_id,
            autograph: this.options.is_sign == 1 ? this.signatureValue : '',
            remark: this.options.is_sign == 1 ? '' : this.signatureValue,
          });
          uni.showToast({
            title: '保存成功',
            icon: 'none',
          });
          setTimeout(() => {
            uni.navigateBack();
          }, 1000);
        } else {
          let obj = {};
          if (this.options.is_sign == 1) {
            obj.member_id = this.options.member_id;
            obj.bio = this.signatureValue;
          } else {
            obj.member_id = this.options.member_id;
            obj.description = this.signatureValue;
          }
          let { code } = await sheep.$api.family.updateFamilyMemberInfo(obj);
          uni.showToast({
            title: '保存成功',
            icon: 'none',
          });
          uni.$emit('signature');
          uni.$emit('goNotePath');
          setTimeout(() => {
            uni.navigateBack();
          }, 1000);
        }
      },
    },
  };
</script>

<style lang="scss">
  .signature {
    width: 750rpx;
    min-height: 100vh;
    background: #F5F5F5;
    overflow: hidden;
    margin: 0 auto;

    .signature_textare {
      width: 661rpx;
      background: #EDEDED;
      border-radius: 17rpx 17rpx 17rpx 17rpx;
      padding: 16rpx 14rpx;
      overflow: hidden;

      .signature_textare_class {
        width: 633rpx;
        min-height: 202rpx;
      }

      .signature_textarePlaceholder {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 26rpx;
        color: #4B4B4B;
      }

    }

    .signature_tips {
      width: 661rpx;

      .signature_tips_left {
        .signature_tips_left_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 26rpx;
          color: #4B4B4B;
        }

        .signature_tips_right_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 26rpx;
          color: #4B4B4B;
        }
      }

      .signature_tips_right {
        .signature_tips_right_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 26rpx;
          color: #4B4B4B;
        }

      }

      .signature_tips_button_class {
        width: 133rpx;
        height: 48rpx;
        background: #FF4206;
        border-radius: 41rpx 41rpx 41rpx 41rpx;

        .signature_tips_button_class_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 24rpx;
          color: #FFFFFF;
        }
      }
    }

    .signature_button {
      width: 661rpx;

      .signature_tips_button_class {
        width: 133rpx;
        height: 48rpx;
        background: #FF4206;
        border-radius: 41rpx 41rpx 41rpx 41rpx;

        .signature_tips_button_class_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 24rpx;
          color: #FFFFFF;
        }
      }
    }
  }
</style>
